<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<base href="/springbootmarket-client/static/" />
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css" />
		<script type="text/javascript" src="../../js/vue.min.js"></script>
		<style>
			html {
				height: 100%;
				width: 100%;
			}
			
			body {
				height: 100%;
				margin: 0;
				padding: 0;
			}
			/*页面整体容器布局*/
			
			.my-container {
				position: fixed;
				/*固定定位*/
				top: 0px;
				bottom: 0px;
				left: 0px;
				right: 0px;
				background-color: #DDDDDD;
				min-width: 800px;
				min-height: 500px;
			}
			/*页面标题*/
			
			.main-title {
				position: absolute;
				/*绝对定位依赖于父元素定位*/
				top: 0px;
				height: 50px;
				width: 100%;
				background-color: #009688;
				display: flex;
			}
			/*侧边导航栏*/
			
			.main-nav {
				position: absolute;
				top: 50px;
				left: 0px;
				width: 200px;
				bottom: 50px;
				background-color: #666666;
			}
			/*内容区域*/
			
			.main-content {
				position: absolute;
				top: 50px;
				left: 200px;
				right: 0px;
				bottom: 50px;
				background-color: #FFFFFF;
			}
			/*底部声明*/
			
			.main-bottom {
				position: absolute;
				width: 100%;
				height: 50px;
				line-height: 50px;
				bottom: 0px;
				background-color: #000000;
				text-align: center;
				color: #FFFFFF;
				font-size: 20px;
				letter-spacing: 1px;
			}
			/*标题栏公司信息*/
			
			.main-title>.title-logo {
				position: absolute;
				left: 50px;
				height: 50px;
				line-height: 50px;
				color: #FFFFFF;
				font-size: 26px;
				font-weight: bold;
			}
			/*标题栏个人信息面板*/
			
			.main-title>.personal-info {
				position: absolute;
				right: 150px;
				display: flex;
			}
			/*标题栏个人信息照片*/
			
			.personal-info>.title-photo {
				margin-top: 5px;
				width: 40px;
				height: 40px;
				border-radius: 50%;
				border: 0px solid red;
				background-image: url(img/2.jpg);
				background-size: 100%;
			}
			/*标题栏个人信息文字*/
			
			.personal-info>.title-info {
				margin-left: 10px;
				height: 50px;
				line-height: 50px;
				border: 0px solid red;
				right: 130px;
				color: #FFFFFF;
				letter-spacing: 2px;
			}
			/*标题栏个人信息文字悬浮*/
			
			.personal-info>.title-info:hover {
				cursor: pointer;
				color: #FD7E14;
			}
			/*侧边导航栏菜单面板*/
			
			.menu-panel {
				border-bottom: 1px solid #E9E7E7;
			}
			/*侧边导航栏个人信息照片*/
			
			.main-nav>.nav-photo {
				margin: 10px 10px;
				width: 180px;
				height: 180px;
				border-radius: 50%;
				border: 0px solid red;
				background-image: url(img/2.jpg);
				background-size: 100%;
			}
			/*侧边导航栏个人信息资料*/
			
			.main-nav>.nav-info {
				display: flex;
				flex-direction: column;
				align-items: center;
				font-size: 18px;
				color: #D3D4D3;
				letter-spacing: 3px;
			}
			/*侧边导航栏主菜单*/
			
			.mainMenu {
				display: flex;
				background-color: #8D8D8D;
				color: #E9E7E7;
				align-items: center;
				padding: 10px 0px 10px 0px;
				font-size: 16px;
				letter-spacing: 3px;
			
			}
			/*侧边导航栏主菜单悬浮*/
			
			.mainMenu:hover {
				/*background-color: #ADB5BD;*/
				cursor: pointer;
				color: #FFFFFF;
			}
			/*侧边导航栏子菜单*/
			
			.subMenu {
				display: flex;
				flex-direction: column;
				background-color: #95999C;
				letter-spacing: 3px;
				/* padding-left: 20px; */
			}
			/*侧边导航栏子菜单菜单项*/
			
			.menu-item:link,
			.menu-item:visited {
				padding: 10px 0px 10px 60px;
				text-decoration: none;
				font-size: 14px;
				color: #E9E7E7;
			}
			/*侧边导航栏子菜单菜单项悬浮*/
			
			.menu-item:hover {
				color: #FFFFFF;
				background-color: #454D55;
			}
			/**箭头图标合起来的样式*/
			
			.mainMenu.collapsed:after {
				content: "\f078";
			}
			/**箭头图标展开式时的样式*/
			
			.mainMenu::after {
				position: absolute;
				border: none;
				content: "\f077";
				font-family: FontAwesome;
				font-size: 15px;
				right: 10px;
			}
			
			.fist-fa {
				padding-right: 10px;
				margin-left: 15px;
			}
			
			.contentFrame{
				width: 100%;
				height: 100%;
				border:none;
			}
		</style>

	</head>

	<body>
		<div class="my-container" id="main-container">
			<div class="main-title">
				<div class="title-logo">
					美印在线生产信息系统
				</div>
				<!--个人信息-->
				<div class="personal-info">
					<div class="title-photo"></div>
					<div class="dropdown-toggle title-info" data-toggle="dropdown">
						<span>{{currUser.u_name}}</span>
						<div class="dropdown-menu">
							<a class="dropdown-item" href="#">个人中心</a>
							<a class="dropdown-item" href="#">修改密码</a>
							<a class="dropdown-item" href="#" @click.prevent="exit">安全退出</a>
						</div>
					</div>
				</div>

			</div>

			<div class="main-nav">

				<div class="nav-photo"></div>
				<div class="nav-info">
					<label>{{currUser.u_name}}</label>
					<label>{{currUser.ro_name}}</label>
				</div>

				<!--菜单开始-->
				<div class="accordion" id="menu">
					
					<div class="menu-panel" v-for="mainMenu in menuList">
						<div class="mainMenu collapsed" data-toggle="collapse" :data-target="'#menu'+mainMenu.m_id">
							<i class="fa fa-bars fist-fa"></i> {{mainMenu.m_name}}
						</div>
						<div :id="'menu'+mainMenu.m_id" class="subMenu collapse" data-parent="#menu">
							<a class="menu-item" target="contentFrame"  v-for="subMenu in mainMenu.subMenuViews"
							 :href="subMenu.m_url">{{subMenu.m_name}}</a>
						</div>
					</div>
					<!--菜单结束-->

					
				</div>

			</div>

			<!-- target表示要在何处打开链接文档 -->
			<div class="main-content">
				<iframe name="contentFrame" class="contentFrame"></iframe>
			</div>

			<div class="main-bottom">
				&copy;2020-2010 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;加中实训研发部
			</div>
		</div>
		<script type="text/javascript" src="../../js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="../../js/popper.min.js"></script>
		<script type="text/javascript" src="../../js/bootstrap.min.js"></script>
		<script type="text/javascript" src="../../js/axios.min.js"></script>
		<script type="text/javascript" src="../../layer-v3.1.1/layer/layer.js"></script>
		<script type="text/javascript" src="../../js/sweetalert2.all.min.js"></script>
		<script type="text/javascript" src="../../js/my.js"></script>
		<script type="text/javascript">
			let vue = new Vue({
				el: '#main-container',
				data: {
					currUser:{},
					menuList:[]
				},
				methods: {
					//获取菜单列表
					getMenu(){
						
					},
					// 获取登录id信息
					getCurrUser(){
						this.$myGet('/safty/home/getCurrUser')
						.then((result)=>{
							this.currUser=result;
							//获取菜单列表
							this.$myGet('/safty/home/getMenuList',{params:{u_id:this.currUser.u_id},})
							.then((result)=>{
								console.log(result);
								this.menuList=result;
							})
						})
					},
					// getCurrUser(){
					// 	var index=layer.load(0);
					// 	$axios.get('/safty/home/getCurrUser')
					// 	.then((response)=>{
					// 		layer.close(index);
					// 		let result=response.data;
					// 		console.log(result);
					// 		if(result.login){
					// 			this.currUser=response.data;
					// 			//获取菜单列表
					// 			$axios.get('/safty/home/getMenuList',{
					// 				params:{u_id:this.currUser.u_id},
					// 				})
					// 			.then((response)=>{
					// 				console.log(response.data);
					// 				this.menuList=response.data;
					// 			})
					// 			.catch((error)=>{
					// 				
					// 			})
					// 		}
					// 		else{
					// 			layer.msg('请登陆后访问',{icon:2,time:2000},
					// 				()=>{
					// 					location.href="../login/index.html"
					// 				})
					// 			
					// 		}
					// 		
					// 	}).catch((error)=>{
					// 		layer.close(index);
					// 		layer.msg('服务器升级中',{
					// 			icon:2
					// 		})
					// 	})
					// 	
					// },
					//退出方法
					exit(){
						this.$myGet('safty/home/exit')
						.then((result)=>{
							if(result.success){
								this.currUser={};
								Swal.fire({
								    icon: 'success',
								    title: result.message,
								    showConfirmButton: false,
								    timer: 1500,
								})
								
								setTimeout(()=>{
									location.href="safty/login/index.html";
								},1500)
							}
						})
					}
					// exit(){
					// 	$axios.get('/safty/home/exit')
					// 	.then((response)=>{
					// 		console.log(response.data);
					// 		let result=response.data;
					// 		if(result.success){
					// 			this.currUser={},
					// 			// layer.msg(response.data.message,{
					// 			// 	icon:1,
					// 			// 	time:1500
					// 			// })
								// Swal.fire({
								//     icon: 'success',
								//     title: response.data.message,
								//     showConfirmButton: false,
								//     timer: 1500,
								// })
								// 
								// setTimeout(()=>{
								// 	location.href="../login/index.html";
								// },1500)
					// 			
					// 		}
					// 		
					// 	})
					// 	.catch((error)=>{
					// 		layer.msg('服务器升级中',{
					// 			icon:2,
					// 			time:1500
					// 		})
					// 	})
					// 	
					// }

				},
				mounted() {
					this.getCurrUser();
					// this.getMenu();
						
				}
			});
		</script>
	</body>

</html>